<template>
  <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
    <div class="py-3 menu-list">
      <n-tree
        block-line
        cascade
        checkable
        :virtual-scroll="true"
        :allow-checking-not-loaded="true"
        key-field="menuId"
        label-field="menuTitle"
        :data="treeData"
        :expandedKeys="expandedKeys"
        :checked-keys="checkedKeys"
        style="max-height: 950px; overflow: hidden"
        @update:checked-keys="checkedTree"
        @update:expanded-keys="onExpandedKeys"
      />
    </div>
    <template #action>
      <n-space>
        <n-button type="info" ghost icon-placement="left" @click="packHandle">
          全部{{ expandedKeys.length ? '收起' : '展开' }}
        </n-button>

        <n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
          全部{{ checkedAll ? '取消' : '选择' }}
        </n-button>
        <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, h, onMounted } from 'vue';
import { useMessage, useDialog, NSwitch, NTag } from 'naive-ui';
import { getMenuList } from '@/api/system/menu';
import { getRoleMenuByRoleId, saveRoleMenu } from '@/api/system/role';
import { getTreeAll } from '@/utils';
import { log } from 'console';
const showModal = ref(false);
const checkedAll = ref(false);
const formBtnLoading = ref(false);
const treeData = ref([]);
const expandedKeys = ref([]);
let _clickData = null;
const message = useMessage();
let roleId = ref(null);
let editRoleTitle = ref('');
const checkedKeys = ref([]);

function checkedTree(keys) {
  checkedKeys.value = [...keys];
}

function onExpandedKeys(keys) {
  expandedKeys.value = keys;
}

function packHandle() {
  if (expandedKeys.value.length) {
    expandedKeys.value = [];
  } else {
    expandedKeys.value = treeData.value.map((item: any) => item.menuId) as [];
  }
}

function checkedAllHandle() {
  if (!checkedAll.value) {
    checkedKeys.value = getTreeAll(treeData.value, 'menuId');
    checkedAll.value = true;
  } else {
    checkedKeys.value = [];
    checkedAll.value = false;
  }
}

function open(clickData = null) {
  _clickData = clickData;
  if (_clickData != null) {
    editRoleTitle.value = _clickData.roleName + '【配置菜单权限】';
    roleId.value = _clickData.roleId;

    getRoleMenuByRoleId(roleId.value).then((res) => {
      if (res.success) {
        checkedKeys.value = [...res.result];
      }
    });
  }
  showModal.value = true;
}

function confirmForm(e: any) {
  e.preventDefault();
  formBtnLoading.value = true;

  saveRoleMenu({
    roleId: roleId.value,
    menuIds: checkedKeys.value,
  }).then((res) => {
    if (res.success) {
      message.success('保存成功');
      showModal.value = false;
    }
  });

  formBtnLoading.value = false;
}

async function loadData() {
  const treeMenuList = await getMenuList();
  treeData.value = treeMenuList.result;
  //默认全部展开
  packHandle();
}

onMounted(() => {
  loadData();
});

defineExpose({
  open,
});
</script>

<style>
</style>